<!--
 * @Author: wangshuguang
 * @Date: 2022-02-16 14:23:49
 * @LastEditTime: 2022-09-20 16:45:00
 * @LastEditors: wangshuguang
 * @Description: 机构基础配置
-->
<template>
  <el-card class="common-container">
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <el-form-item label="机构/业务编号">
        <el-input v-model="listQuery.orgInfo" placeholder="机构/业务编号" size="small" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round size="small" @click="fetchData">查询</el-button>
        <el-button type="primary" round size="small" @click="addData">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table size="medium" :data="list" border>
      <el-table-column label="序号" width="50" prop="id">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="orgName" align="center" label="机构" />
      <el-table-column prop="orgId" align="center" label="业务编码" />
      <el-table-column prop="OrgDiscountConf" align="center" label="租户流量余额折扣配置" width="200">
        <template slot-scope="scope">
          <div v-for="item of scope.row.orgDiscountConf" :key="item.id">
            单笔金额≥{{ item.singlePay }}元：{{ item.discount }}折
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="interactionRatio" align="center" label="平台佣金兑换流量余额比例">
        <template slot-scope="scope">
          <span>{{ scope.row.interactionRatio }} : 10</span>
        </template>
      </el-table-column>
      <el-table-column prop="oneAgtDiscount" align="center" label="代理流量余额折扣配置" width="150">
        <template slot-scope="scope">
          <div>运营中心：{{ scope.row.operateDiscount }}</div>
          <div>一级代理：{{ scope.row.oneAgtDiscount }}</div>
          <div>二级代理：{{ scope.row.twoAgtDiscount }}</div>
          <div>三级代理：{{ scope.row.threeAgtDiscount }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="agtConfigList" align="center" label="代理套餐配置" width="150">
        <template slot-scope="scope">
          <div v-for="item of scope.row.agtConfigList" :key="item.id">
            {{ item.rechargeFixMoney }}元
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="mercConfigList" align="center" label="商户充值金额" width="150">
        <template slot-scope="scope">
          <div v-for="item of scope.row.mercConfigList" :key="item.id">
            {{ item.rechargeFixMoney }}元
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="flowRatio" align="center" label="流量标准资费">
        <template slot-scope="scope">
          <span>1流量 = {{ scope.row.flowRatio }} 次交互</span>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" align="center" label="更新时间" />
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="viewData(scope.row)">详情</el-button>
          <el-button size="small" type="primary" @click="editdata(scope.row)">修改配置</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-drawer
      :title="infoConfig.title"
      :visible.sync="infoVisible"
      size="50%"
      direction="rtl"
    >
      <orgBaseConfInfo
        v-if="infoVisible"
        :info-config="infoConfig"
        @sucClose="sucClose"
        @close="infoVisible = false"
      />
    </el-drawer>
  </el-card>
</template>

<script>
import { orgConfList } from '@/api/flowConf'
import orgBaseConfInfo from './components/orgBaseConfInfo.vue'

export default {
  components: { orgBaseConfInfo },
  data() {
    return {
      infoVisible: false,
      infoConfig: {
        title: '',
        data: {}
      },
      form: {},
      scope: 0,
      total: 0,
      statusOptions: ['停用', '正常'],
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        orgInfo: ''
      },
      list: []
    }
  },

  mounted() {
    this.fetchData()
  },
  methods: {
    sucClose() {
      this.infoVisible = false
      this.fetchData()
    },
    editdata(data) {
      this.infoConfig = {
        type: 'edit',
        title: '修改配置',
        data
      }
      this.infoVisible = true
    },
    viewData(data) {
      this.infoConfig = {
        type: 'detail',
        title: '详情',
        data
      }
      this.infoVisible = true
    },
    addData(data) {
      this.infoConfig = {
        type: 'add',
        title: '新增机构配置',
        data
      }
      this.infoVisible = true
    },
    fetchData() {
      orgConfList(this.listQuery).then(res => {
        if (res.code === 0) {
          this.list = res.data.list.map(item => {
            return {
              ...item,
              ...item.orgBaseInfo,
              mercConfigList: item.orgPackageConf.filter(v => v.roleType == 2),
              agtConfigList: item.orgPackageConf.filter(v => v.roleType == 1)
            }
          })
          this.total = res.data.total
          console.log('list', this.list)
        }
      })
    },
    handleEdit(user) {
      this.$refs.userDialog.openEdit(user.id).then(() => {
        this.fetchData()
      })
    },

    handleFilter() {
      this.fetchData()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.fetchData()
    },
    handleResetPassword(user) {
      this.$refs.resetPw.open(user.id)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.search-container {
	margin-top: 20px;
	margin-bottom: 20px;
}

.search-wrap {
	width: 300px;
	margin-right: 10px;
}
.el-button--primary:hover,
.el-button--primary:focus {
	background-color: $btnBgc;
	border-color: $btnBgc;
}
</style>
